<template>
  <div class="app-wrapper">
    <el-card v-loading="loading" element-loading-text="拼命处理中...">
      <el-form label-position="right" :model="user" ref="user" label-width="120px" :rules="rules" size="medium">
        <el-form-item label="真实姓名" prop="realName">
          <el-input class="input-width" v-model="user.realName"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="user.age" :min="1" :max="100" class="input-width" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="标签多选" prop="tags">
          <el-select v-model="user.tags" multiple placeholder="请选择标签" class="input-width">
            <el-option v-for="tag in tagList" :key="tag.key" :label="tag.value" :value="tag.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-cascader :options="locations" v-model="user.address" placeholder="请选择地址" clearable class="input-width"></el-cascader>
        </el-form-item>
        <el-form-item label="注册日期" prop="createDate">
          <el-date-picker v-model="user.createDate" type="datetime" class="input-width" placeholder="选择注册日期" align="right"></el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio class="radio" v-model="user.gender" :label="1">男</el-radio>
          <el-radio class="radio" v-model="user.gender" :label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="兴趣爱好" prop="hobby">
          <el-checkbox-group v-model="user.hobby" :min="1" :max="3">
            <el-checkbox v-for="hobby in hobbyList" :label="hobby.key" :key="hobby.key">{{hobby.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="订阅消息推送" prop="payway">
          <el-switch v-model="user.payway">
          </el-switch>
        </el-form-item>
        <el-form-item label="上传头像" prop="avatar">
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="user.avatar" :src="user.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="个人简介" prop="description">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" class="input-width" v-model="user.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<style scoped>
.input-width {
  width: 20% !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
</style>
<script>
export default {
  methods: {
    onSubmit() {
      var self = this
      self.$refs['user'].validate(valid => {
        if (valid) {
          this.$confirm('确认提交此表单吗?\n' + JSON.stringify(this.user), '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.loading = true
              setTimeout(() => {
                this.loading = false
                this.$message({
                  type: 'success',
                  message: '恭喜你，表单提交成功!'
                })
              }, 2000)
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消表单提交'
              })
            })
        } else {
          return false
        }
      })
    },
    reset() {
      this.$refs['user'].resetFields()
    },
    handleAvatarSuccess(res, file) {
      this.user.avatar = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      console.log(file)
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },
  data() {
    return {
      loading: false,
      user: {
        realName: 'skloda',
        age: 20,
        gender: 1,
        hobby: [1],
        payway: true,
        tags: [1, 2],
        createDate: new Date(),
        address: ['liaoning', 'shenyang'],
        description: '测试测试测试',
        avatar: '/static/avatar.png'
      },
      hobbyList: [
        { key: 1, value: '电影' },
        { key: 2, value: '钢琴' },
        { key: 3, value: '绘画' },
        { key: 4, value: '吉他' },
        { key: 5, value: '游戏' }
      ],
      tagList: [
        { key: 1, value: '开朗' },
        { key: 2, value: '内向' },
        { key: 3, value: '人来疯' },
        { key: 4, value: '乐天派' }
      ],
      locations: [
        {
          value: 'liaoning',
          label: '辽宁',
          children: [
            { value: 'shenyang', label: '沈阳' },
            { value: 'dalian', label: '大连' }
          ]
        },
        {
          value: 'shandong',
          label: '山东',
          children: [
            { value: 'jinan', label: '济南' },
            { value: 'qingdao', label: '青岛' }
          ]
        }
      ],
      rules: {
        realName: [{ required: true, message: '请输入真实姓名' }],
        age: [{ required: true, message: '请输入年龄' }],
        tags: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个标签',
            trigger: 'change'
          }
        ],
        tag: [{ required: true, message: '请选择标签' }],
        address: [{ required: true, message: '请选择地址' }],
        createDate: [
          {
            type: 'date',
            required: true,
            message: '请选择注册时间',
            trigger: 'change'
          }
        ]
      }
    }
  }
}
</script>